<template>
  <div class="header-wrapper">
    <mt-header :class="{header: true, 'animated': true, 'fadeOutUp': fadeOutUp, 'fadeInDown': fadeInDown, 'state-bar': stateBar}" :title="title" :fixed="fixed">
      <mt-button slot="left" @click="goBack">
        <i :class="back.icon" v-show="back.show !== false">{{back.text}}</i>
      </mt-button>
      <mt-button slot="right" @click="goShare">
        <i :class="share.icon" v-show="share.show !== false">{{share.text}}</i>
      </mt-button>
    </mt-header>
    <div v-show="fixed" class="header-padding" :class="{'state-bar': stateBar}"></div>
  </div>
</template>
<script>
  import scrollMonitor from 'utils/scroll-monitor'
  export default {
    name: 'Header',
    props: {
      title: {
        type: String,
        required: true
      },
      fixed: {
        type: Boolean,
        'default': false
      },
      stateBar: {
        type: Boolean,
        'default': false
      },
      back: {
        type: Object,
        'default': function () {
          return {
            show: true,
            text: '',
            icon: 'icon left'
          }
        }
      },
      share: {
        type: Object,
        'default': function () {
          return {
            show: false,
            text: '',
            icon: 'icon share-p'
          }
        }
      },
      fadeOut: {
        type: Boolean,
        'default': true
      }
    },
    data() {
      return {
        fadeOutUp: false,
        fadeInDown: false
      }
    },
    computed: {},
    mounted() {
      if (this.fadeOut) {
        scrollMonitor((dir, scrollTop) => {
          if (dir === 'up' && scrollTop >= 300) {
            if (this.fadeOutUp) {
              return
            }
            console.log('隐藏')
            this.fadeOutUp = true
            setTimeout(() => {
              this.fadeInDown = false
            }, 300)
          } else if (dir === 'down') {
            if (this.fadeInDown) {
              return
            }
            console.log('显示')
            this.fadeInDown = true
            setTimeout(() => {
              this.fadeOutUp = false
            }, 300)
          }
        })
      }
    },
    methods: {
      goBack(e) {
        this.$emit('onBack', e)
      },
      goShare(e) {
        this.$emit('onShare', e)
      }
    }
  }
</script>
<style lang="postcss" scoped>
  .header-wrapper {
    .header {
      background-color: #fff;
      color: #000;
      font-size: 16px;
      height: 46px;
      border-bottom: 1px solid #ddd;
      clear: both;
      &.state-bar {
        height: 66px;
        padding-top: 20px;
      }
    }
    .header-padding {
      height: 46px;
      &.state-bar {
        height: 66px;
      }
    }
  }

  @media only screen
  and (device-width: 375px)
  and (device-height: 812px)
  and (-webkit-device-pixel-ratio: 3) {
    .header-wrapper {
      .header {
        &.state-bar {
          height: 76px;
          padding-top: 30px;
        }
      }
      .header-padding {
        &.state-bar {
          height: 76px;
        }
      }
    }
  }
</style>
